<template>
  <el-form size="mini" :model="userFormData" status-icon :rules="rules" ref="userFormRef" label-width="90px">
    <el-form-item label="姓名" prop="realname">
      <el-input type="text" v-model="userFormData.realname" autocomplete="off"></el-input>
      <span class="el-icon-warning-outline tip" v-if="!errorFields.includes('realname')">
        姓名为身份证中的名称</span>
    </el-form-item>
    <el-form-item label="账号" prop="username">
      <el-input type="text" readonly v-model="userFormData.username" autocomplete="off"></el-input>
      <span class="el-icon-warning-outline tip" v-if="!errorFields.includes('username')">
        账号是不能被修改的</span>
    </el-form-item>
    <el-form-item label="修改密码" prop="password">
      <el-checkbox v-model="ispass" />
      <br />
      <el-input type="text" v-if="ispass" v-model="userFormData.password" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <el-radio-group v-model="userFormData.sex">
        <el-radio label="1">先生</el-radio>
        <el-radio label="2">女士</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="手机号" prop="phone">
      <el-input type="text" v-model="userFormData.phone" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="生日" prop="birthday">
      <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
        v-model="userFormData.birthday"></el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('userFormRef')">提交</el-button>
      <el-button @click="resetForm('userFormRef')">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>

import { editUserIdToInfoApi, getUserIdToInfoApi } from "@/api/userApi"
import { addUserRulesMixin } from "../mixin"
export default {
  mixins: [addUserRulesMixin],
  props: ['setDialogVisible', "userid"],//接受父组件传来的方法，实现在点击提交后关闭弹出框
  data() {
    return {
      ispass: false,
      userFormData: {
        realname: '',
        username: '',
        password: '',
        sex: '',
        phone: '',
        birthday: '',
        avatar: ''

      },
    }
  },
  watch: {
    // 单选框未选中或者this.userFormData.password=""判断输入框是否显示
    ispass(value) {
      !value && (this.userFormData.password = "")
    }
  },
  mounted() {
    this.loadUserData()
  },
  methods: {
    async loadUserData() {
      let ret = await getUserIdToInfoApi(this.userid)
      if (ret.code === 0) {
        for (let key in ret.data) {
          if (this.userFormData[key] !== undefined) {
            this.userFormData[key] = ret.data[key]
          }
        }
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid, errors) => {
        this.errorFields = Object.keys(errors)//errors为对象，包括未输入的属性，存入errorFields数组中用来判断显示提示文字
        if (valid) {
          // 发送网络请求给后端接口
          // 深复制
          let userData = { ...this.userFormData }
          //不修改密码的情况时，删除数组中的password
          if (!this.ispass) {
            delete userData.password
          }
          // 请求数据
          let ret = await editUserIdToInfoApi(this.userid, userData)
          // 新增用户成功
          if (ret.code === 0) {
            this.$message({
              message: '修改用户成功！',
              type: 'success',
              showClose: true,//手动关闭
              duration: 3000,
              onClose: () => {
                // 关才弹出层之前，需要对表单项进行清空操作
                this.resetForm(formName)
                // 添加成功后，后端接口返回数据后，关闭当前弹出层,并修改userid为0
                this.setDialogVisible(false, 0)
              }
            })
          } else {
            // 提示一下
            this.$message({
              message: '修改用户失败，请认真检查填写的内容！',
              type: 'error',
              duration: 3000
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>


<style  scoped>
.tip {
  color: #c0c4cc;
  font-size: 12px;
}
</style>